<template>
  <div class="user-center">
    <h1>个人中心</h1>
    <el-card
      style="width: 100%"
      body-style="display:flex;align-items: flex-start;"
    >
      <div class="avatar">
        <el-avatar shape="square" :src="userInfoData.avatar"></el-avatar>
        <el-button type="primary" @click="changeAvatar">修改头像</el-button>
        <el-popover
          placement="bottom"
          title="什么是积分"
          :width="200"
          trigger="hover"
          content="积分只能通过每日签到获得, 暂时没想好有什么用"
        >
          <template #reference>
            <el-tag class="score">我的积分: {{ userInfoData.score }}</el-tag>
          </template>
        </el-popover>
      </div>
      <div class="user-info">
        <h1>{{ getLoggedUser().name }}</h1>
        <el-tabs type="border-card">
          <el-tab-pane label="我的帖子">
            <x-post-list class="post-list" :posts="posts"></x-post-list>
          </el-tab-pane>
          <el-tab-pane label="个人资料" lazy>
            <x-user-detail :userInfo="userInfoData"></x-user-detail>
          </el-tab-pane>
          <el-tab-pane label="安全">
            <x-security></x-security>
          </el-tab-pane>
          <el-tab-pane label="交友信息" lazy>
            <x-friendship :photos="photos"></x-friendship>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
  <el-dialog
    v-model="showUploadDialog"
    title="修改头像"
    width="30%"
    align-center
    center
  >
    <div class="dialog-content">
      <el-upload
        :headers="headers"
        :action="uploadURL"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
  </el-dialog>
</template>

<script setup>
import { getLoggedUser } from "@/utils/stateUtils";
import { postList, uploadURL, userInfo, userDetail } from "@/api/userAPI";
import { ElMessage } from "element-plus";

const store = useStore();
const posts = ref();
const imageUrl = ref();
const headers = { token: getLoggedUser().token };
const showUploadDialog = ref(false);

const userInfoData = ref({});
const photos = ref();
const userId = getLoggedUser().id;

const changeAvatar = () => {
  showUploadDialog.value = true;
};

const handleAvatarSuccess = (response, uploadFile) => {
  if (response.success) {
    store.commit("setAvatar", response.data);
    ElMessage.success(response.message);
  } else {
    ElMessage.error(response.message);
  }
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
};

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("支支持 jpg 或 png 格式的图片");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小不能超过 2MB!");
    return false;
  }
  return true;
};

onMounted(() => {
  postList(userId).then((data) => {
    posts.value = data.data.data;
  });
  userInfo().then((data) => {
    userInfoData.value = data.data;
  });
  userDetail(userId).then(({ data }) => {
    photos.value = data.photos;
  });
});
</script>

<style scoped>
.user-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.avatar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-right: 40px;
}

.avatar > .el-button {
  margin-top: 10px;
}

.user-info {
  width: 100%;
}

.user-info > h1 {
  margin: 0;
  margin-bottom: 10px;
}
.score {
  margin-top: 10px;
}
</style>
